.test{
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  padding-bottom: env(safe-area-inset-bottom);

  .bg{
    position: absolute;
    top: 10rpx;
    left: 20rpx;
    right: 20rpx;
    width: calc(100% - 40rpx);
    z-index: -1;
  }
  .head{
    height: 168rpx;
    box-sizing: border-box;
    flex-shrink: 0;
    padding-top: 72rpx;
    padding-left: 40rpx;
    display: flex;
    align-items: center;
    color: #000000;;
    font-size: 40rpx;
  }
  .content{
    height: calc(100% - 100rpx - 168rpx);
    overflow-y: auto;
    .title{
      font-family: PingFang SC;
      font-size: 36rpx;
      font-weight: 600;
      line-height: normal;
      color: #222222;
      margin-left: 70rpx;
    }
    .rebot{
      width: 258rpx;
      display: block;
      margin: 90rpx auto 58rpx;
    }

    .content-bg{
      width: 576rpx;
      display: block;
      margin: 60rpx auto 58rpx;
    }

    // type = 1 选择题
    .voice-btn{
      margin: 0 auto;
      width: 136rpx;
      height: 136rpx;
      border-radius: 136rpx;
      background: linear-gradient(180deg, #769FFF 0%, #4E6CEE 100%);
      .img{
        width: 90rpx;
      }
    }

    .select-box-1{
      margin: 220rpx auto;
      .item{
        margin-bottom: 30rpx;
        width: 626rpx;
        height: 176rpx;
        border-radius: 44rpx;
        background: #F8F8F8;
        box-sizing: border-box;
        border: 2rpx solid #E8E8E8;
        font-family: Arial;
        font-size: 36rpx;
        font-weight: bold;
        line-height: normal;
        color: #3D3D3D;
        &.active{
          background: #F6F8FF;
          border: 2px solid #4E6CEE;
        }
      }
    }

    // 完形填空
    .sentence-box{
      margin: 84rpx 20rpx 130rpx;
      flex-wrap: wrap;
      .item{
        margin-right: 12rpx;
        padding-bottom: 12rpx;
        font-family: PingFang SC;
        font-size: 36rpx;
        font-weight: 600;
        line-height: normal;
        color: #3D3D3D;
        &.fill{
          color: #6F5CBF;
          border-bottom: 2rpx dotted #6F5CBF;
          padding: 0 24rpx 12rpx;
        }
      }
    }

    .select-box-3{
      margin: 100rpx 70rpx;
      gap: 24rpx;
      flex-wrap: wrap;
      .item{
        flex-shrink: 0;
        padding: 30rpx;
        border-radius: 4px;
        background: #F8F8F8;
      }
    }

    // 填词
    .voice-panel{
      width: 566rpx;
      height: 130rpx;
      border-radius: 32rpx;
      background: #FFFFFF;
      box-shadow: 0px 2px 6px 0px rgba(0, 0, 0, 0.1);
      margin: 0 auto;
      position: relative;
      padding: 30rpx 36rpx;
      box-sizing: border-box;
      .top{
        position: absolute;
        top: -24rpx;
        left: 193rpx;
        width: 0;
        height: 0;
        border-left: 80rpx solid transparent;
        border-right: 80rpx solid transparent;
        border-bottom: 24rpx solid #fff;
      }
      .wave-box{
        width: 308rpx;
        height: 58rpx;
      }
      .eng{
        font-family: Arial;
        font-size: 36rpx;
        font-weight: bold;
        line-height: normal;
        color: #3D3D3D;
      }
      .voice{
        flex-shrink: 0;
        width: 56rpx;
        height: 56rpx;
        border-radius: 56rpx;
        background: #E9EAF2;
        display: flex; 
        justify-content: center;
        align-items: center;
        .voice-img{
          width: 40rpx;
          height: 40rpx;
        }
      }
    }
    .ans-line{
      margin: 84rpx 20rpx 130rpx;
      .item{
        padding: 22rpx 18rpx;
        font-family: PingFang SC;
        font-size: 36rpx;
        font-weight: 600;
        line-height: normal;
        border-bottom: 4rpx dotted #6F5CBF;;
        &:nth-child(3n+1){
          color: #6F5CBF;
        }
        &:nth-child(3n+2){
          color: #619355;
          border-color: #619355;
        }
        &:nth-child(3n+3){
          color: #FFD105;
          border-color: #FFD105;
        }
      }
    }
    .select-box{
      margin: 0 70rpx;
      gap: 24rpx;
      flex-wrap: wrap;
      .item{
        flex-shrink: 0;
        padding: 30rpx;
        border-radius: 4px;
        background: #F8F8F8;
      }
    }
  }
  .check{
    .img{
      width: 126rpx;
      margin-bottom: 24rpx;
    }
    .txt{
      font-family: PingFang SC;
      font-size: 36rpx;
      font-weight: 500;
      line-height: 32rpx;
      color: #222222;
    }
  }
  .check-btn{
    position: fixed;
    left: 35rpx;
    right: 35rpx;
    bottom: 40rpx;
    height: 100rpx;
    border-radius: 50rpx;
    font-family: PingFang SC;
    font-size: 36rpx;
    font-weight: 500;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #BBCFFF;
    border: 2rpx solid #BBCFFF;
    &.active{
      color: #3E65FF;
      border: 2rpx solid #3E65FF;
    }
  }
}